<template>
  <div class="dingdan">
    <p>饿了么</p>
    <div class="top2">
     <span v-for="(item,index) in quan" :key="index">{{item}}</span>
    </div>
    <div class="box-quan">
        <div class="item" v-for="(item,index) in list " :key="index">
            <div class="banner">
                <img src="https://ts1.cn.mm.bing.net/th/id/R-C.9520553baaa4474c04cda00e952a8e9c?rik=u7DPiVqo9DM8kw&riu=http%3a%2f%2fwww.kaidianbang.com%2fupload%2fimage%2f2020%2f11%2f25%2f1606292005781889.jpg&ehk=sIWefnENYYVRkSBHT8i7vWZm9KcTJ5OFwTzgYF8ul%2fc%3d&risl=&pid=ImgRaw&r=0" alt="" class="imgages1">
                <span>{{item.name}}</span>
            </div>
            <div class="cunent">
                <img :src="item.pic" alt="">
                <img :src="item.pie" alt="">
                <span>￥{{item.money}}</span>
            </div>
            <div class="in">
                <input type="button" value="再来一单">
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
name:'dingdan',
data(){
    return{
        currentIndex:0,
        quan:['全部','待消费','待评价','退款'],
        list:[{name:'纯手工饺子(凤城九路店)',pic:'https://bpic.588ku.com/back_origin_min_pic/20/11/23/dd3056300f41b3ff0504a35fca753dda.jpg',pie:'https://ts1.cn.mm.bing.net/th/id/R-C.7d94eb20c511db62b048f12d065d3dd5?rik=GSbL5ZFwrKxw%2fA&riu=http%3a%2f%2fwww.kaidianbang.com%2fupload%2fimage%2f2020%2f11%2f25%2f1606291894615177.jpg&ehk=gL6imHlmVHFAuywatWGlv3UFmINr07MOKN%2fK8Yp1zZQ%3d&risl=&pid=ImgRaw&r=0',money:17.8},{name:'纯手工饺子(凤城九路店)',pic:'https://bpic.588ku.com/back_origin_min_pic/20/11/23/dd3056300f41b3ff0504a35fca753dda.jpg',pie:'https://ts1.cn.mm.bing.net/th/id/R-C.7d94eb20c511db62b048f12d065d3dd5?rik=GSbL5ZFwrKxw%2fA&riu=http%3a%2f%2fwww.kaidianbang.com%2fupload%2fimage%2f2020%2f11%2f25%2f1606291894615177.jpg&ehk=gL6imHlmVHFAuywatWGlv3UFmINr07MOKN%2fK8Yp1zZQ%3d&risl=&pid=ImgRaw&r=0',money:17.8},{name:'纯手工饺子(凤城九路店)',pic:'https://bpic.588ku.com/back_origin_min_pic/20/11/23/dd3056300f41b3ff0504a35fca753dda.jpg',pie:'https://ts1.cn.mm.bing.net/th/id/R-C.7d94eb20c511db62b048f12d065d3dd5?rik=GSbL5ZFwrKxw%2fA&riu=http%3a%2f%2fwww.kaidianbang.com%2fupload%2fimage%2f2020%2f11%2f25%2f1606291894615177.jpg&ehk=gL6imHlmVHFAuywatWGlv3UFmINr07MOKN%2fK8Yp1zZQ%3d&risl=&pid=ImgRaw&r=0',money:17.8},{name:'纯手工饺子(凤城九路店)',pic:'https://bpic.588ku.com/back_origin_min_pic/20/11/23/dd3056300f41b3ff0504a35fca753dda.jpg',pie:'https://ts1.cn.mm.bing.net/th/id/R-C.7d94eb20c511db62b048f12d065d3dd5?rik=GSbL5ZFwrKxw%2fA&riu=http%3a%2f%2fwww.kaidianbang.com%2fupload%2fimage%2f2020%2f11%2f25%2f1606291894615177.jpg&ehk=gL6imHlmVHFAuywatWGlv3UFmINr07MOKN%2fK8Yp1zZQ%3d&risl=&pid=ImgRaw&r=0',money:17.8},]
    }
}
}
</script>

<style scoped>
.dingdan p{
 text-align: center;
 font-size: 20px;
 margin-bottom: 20px;
}
.top2 span{
    margin: 15px;
}
.imgages1{
    width: 20px;
    height: 20px;
    vertical-align:middle
}
.cunent img{
    width: 70px;
    height: 70px;
    margin-right: 5px;
}
.cunent img:nth-child(2){
    margin-right: 150px;
}

.item{
    margin: 15px;
    background-image: url('https://alifei02.cfp.cn/creative/vcg/800/new/VCG41N1126460506.jpg');
    /* background-color: rgb(198, 198, 198); */
}
.item input{
    width: 80px;
    height: 35px;
    border-radius:35px ;   
}
.in{
    width: 90px;
    height: 100%;
    margin-left: 260px;
}
.banner{
    margin-bottom: 20px;
}
.box-quan{
    overflow: auto;
    height: 542px;
}
</style>